<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:15%;height: 70%;overflow-y: hidden"
  >
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" id="customerModal">
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户名称">
            <div>{{ val.customerName }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内部编码">
            <div>{{ val.contractCode }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同号">
            <div>{{ val.contractNum }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="合同表id">
            <div>{{ val.contractId }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="物流单号">
            <div>{{ val.logisticsNum }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="发货日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <div>{{ val.sendOutDate }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发货单文件">
            <!-- <div :key="Math.random()">
              <a-upload
                name="file"
                accept=".txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
                :beforeUpload="beforeUpload"
                :showUploadList="false"
                :multiple="false"
                :headers="tokenHeader"
                :action="importExcelUrl"
                @change="myhandleImportExcel"
              >
                <a-button><a-icon type="upload" />上传</a-button>
              </a-upload>
            </div> -->
            <a-button @click="previewFile(val.shippingOrder)">预览</a-button>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="回执单">
            <a-button @click="previewFile(val.shippingReceipts)">预览</a-button>
            <!-- <div :key="Math.random()">
              <a-upload
                name="file"
                accept=".txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
                :beforeUpload="beforeUpload"
                :showUploadList="false"
                :multiple="false"
                :headers="tokenHeader"
                :action="importExcelUrlT"
                @change="myhandleImportExcelT"
              >
                <a-button><a-icon type="upload" />上传</a-button>
              </a-upload>
            </div> -->
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收货回执">
            <div v-for="(item, index) in Receipt" :key="index">{{ item.id == val.status ? item.name : '' }}</div>
            <!-- <a-select
              v-decorator.trim="['status']"
              allowClear
              placeholder="选择"
              showSearch
              @change="handleChange"
              optionFilterProp="children"
            >
              <a-select-option v-for="(item, index) in Receipt" :key="index" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select> -->
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="isShow">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="批注">
            <div>{{ val.notation }}</div>
          </a-form-item>
        </a-col>
        <a-divider>产品详情</a-divider>
        <div>
          <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource">
            <template
              v-for="col in ['productName', 'specification', 'count', 'unit', 'batch']"
              :slot="col"
              slot-scope="text, record, index"
            >
              <div :key="col">
                <a-input
                  v-if="record.editable"
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => myhandleChange(e.target.value, record, col)"
                />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <!-- 操作 -->
            <span slot="action" slot-scope="text, record, index">
              <span class="editable-row-operations">
                <span v-if="record.editable">
                  <a @click="() => save(record)">保存</a>
                </span>
                <span v-else>
                  <a :disabled="editingKey !== ''" @click="() => Listedit(record)">编辑</a>
                </span>
              </span>
              <a-divider type="vertical" />
              <span>
                <a-popconfirm title="确定删除吗?" @confirm="() => Delete(record)">
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </span>
          </a-table>
        </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import pick from 'lodash.pick'
import { addContractLogistics, checkSupplier,  } from '@/api/api'
import { getActionImg  } from '@/api/manage'
import { autoJumpNextInput } from '@/utils/util'
import Vue from 'vue'
import { getAction } from '@/api/manage'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: 'SeeLogistics',
  data() {
    return {
      title: '操作',
      val: '',
      Receipt: [
        { id: 0, name: '未收' },
        { id: 1, name: '已收' },
        { id: 2, name: '未收特批' }
      ],
      tokenHeader: { Authorization: 'Bearer ' + Vue.ls.get(ACCESS_TOKEN) },
      isShow: false,
      visible: false,
      bodyStyle: {
        padding: '20',
        height: window.innerHeight * 0.5 + 'px',
        'overflow-y': 'auto'
      },
      model: {},
      record: null,
      isReadOnly: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      PraductNameList: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      defaultFileListO: null,
      defaultFileListT: null,
      url: {
        lists: '/contractProduct/getList',
        importExcelUrl: '/systemConfig/upload' + '?' + `biz=fh`,
        importExcelUrlT: '/systemConfig/upload' + '?' + `biz=hz`
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        name: {
          rules: [{ required: true, message: '请输入!' }]
        }
      },
      cacheData: [],
      dataSource: [],
      columns: [
        { title: '产品名称', dataIndex: 'productName', width: 80, scopedSlots: { customRender: 'productName' } },
        { title: '规格', dataIndex: 'specification', width: 80, scopedSlots: { customRender: 'specification' } },
        { title: '单位', dataIndex: 'unit', width: 80, scopedSlots: { customRender: 'unit' } },
        { title: '数量', dataIndex: 'count', width: 80, scopedSlots: { customRender: 'count' } },
        { title: '批次', dataIndex: 'batch', width: 80, scopedSlots: { customRender: 'batch' } }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   width: 80,
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      guiG: null,
      guiGvalue: null,
      key: new Date().getTime(),
      name: '',
      count: '',
      unit: '',
      batch: '',
      specification: '',
      editingKey: ''
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
      // return `api${this.url.importExcelUrl}`
    },
    importExcelUrlT: function() {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrlT}`
      // return `api${this.url.importExcelUrl}`
    }
  },
  mounted() {
    this.cacheData = this.dataSource.map(item => ({ ...item }))
  },
  methods: {
    add(record) {
      this.record = record
      this.visible = true
      this.val = record
      this.dataSource = JSON.parse(this.val.products)
      console.log(record, 'recordrecord')
    },
    //PDF预览
    previewFile(record) {
      if (record) {
        this.confirmLoading = true
        let params = record
        getActionImg('systemConfig/preview/' + params).then(res => {
          const binaryData = []
          binaryData.push(res)
          // var url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' })) //要预览文件的访问地址
          // window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(base64Encode(url)))
          // console.log(window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' })))
          window.open(window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' })))
          this.confirmLoading = false
          console.log(res, 'res')
        })
      } else {
        this.$message.warning('合同附件未上传')
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style scoped>
/** Button按钮间距 */
.table-operator .ant-btn {
  margin: 0 8px 8px 0;
}
@import '~@assets/less/common.less';
</style>
